<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'

// require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      // Generate data
      let category = ['市区', '万州', '江北', '南岸', '北碚', '綦南', '长寿', '永川', '璧山', '江津', '城口', '大足', '垫江', '丰都', '奉节', '合川', '江津区', '开州', '南川', '彭水', '黔江', '石柱', '铜梁', '潼南', '巫山', '巫溪', '武隆', '秀山', '酉阳', '云阳', '忠县', '川东', '检修'];
      let dottedBase = [];
      let lineData = [18092, 20728, 24045, 28348, 32808
        , 36097, 39867, 44715, 48444, 50415
        , 56061, 62677, 59521, 67560, 18092, 20728, 24045, 28348, 32808
        , 36097, 39867, 44715, 48444, 50415, 36097, 39867, 44715, 48444, 50415
        , 50061, 32677, 49521, 32808];
      let barData = [4600, 5000, 5500, 6500, 7500
        , 8500, 9900, 12500, 14000, 21500
        , 23200, 24450, 25250, 33300, 4600, 5000, 5500, 6500, 7500
        , 8500, 9900, 22500, 14000, 21500, 8500, 9900, 12500, 14000, 21500
        , 23200, 24450, 25250, 7500];
      let rateData = [];
      32808
      for (let i = 0; i < 33; i++) {
        // let date = i+2001;
        // category.push(date)
        let rate = barData[i] / lineData[i];
        rateData[i] = rate.toFixed(2);
      }


      this.chart.setOption({
        // title: {
        //   text: '城市人均年碳排放量/千克',
        //   x: 'center',
        //   bottom:'5',
        //   textStyle: {
        //     // color: '#B4B4B4',
        //     fontSize: 16,
        //     fontWeight: 'normal',
        //   },
        //
        // },
        // backgroundColor: '#191E40',

        // legend: {
        //   data: ['已贯通', '计划贯通', '贯通率',],
        //   textStyle: {
        //     color: '#7B7DDC'
        //   },
        //   top: '10%',
        // },
        title: {
          text: '地级市碳排放走势',
          x: 'center',
          bottom:'5',
          textStyle: {
            // color: '#B4B4B4',
            fontSize: 16,
            fontWeight: 'normal',
          },
        },
        grid: {
          // backgroundColor:'transparent',
          borderWidth:0,
          show:false,
          top:20,
          right:'7%',
          y: '0%',
        },
        xAxis: {
          data: category,
          // axisLine: {
          //   lineStyle: {
          //     color: '#7B7DDC'
          //   }
          // },

          axisTick: {
            show: false,
          },
        },
        yAxis: [{
          splitLine: {show: false},
          axisLabel: {
            formatter: '{value} ',
          },
          splitArea: {
            interval: 0,
            show: false,

          }
        },

          {

            splitLine: {show: false},
            axisLine: {

            },
            axisLabel: {
              formatter: '{value} ',
            }
          }],
        dataZoom: [
          {   // 这个dataZoom组件，默认控制x轴。
            show:true,
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
          },
          {   // 这个dataZoom组件，也控制x轴。
            show:true,
            type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            start: 10,      // 左边在 10% 的位置。
            end: 60         // 右边在 60% 的位置。
          }
        ],
        series: [{
          name: '贯通率',
          type: 'line',
          smooth: true,
          showAllSymbol: true,
          symbol: 'emptyCircle',
          symbolKeepAspect: true,
          symbolSize: 8,
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: '#F02FC2'
            },
          },
          // label:{
          //   show:true
          // },
          data: rateData
        },

          {
            name: '已贯通',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#956FD4'},
                    {offset: 1, color: '#3EACE5'}
                  ]
                )
              }
            },
            data: barData
          },

          {
            name: '计划贯通',
            type: 'bar',
            barGap: '-100%',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: 'rgba(156,107,211,0.5)'},
                    {offset: 0.2, color: 'rgba(156,107,211,0.3)'},
                    {offset: 1, color: 'rgba(156,107,211,0)'}
                  ]
                )
              }
            },
            z: -12,

            data: lineData
          },
        ]

      })
    }
  }
}
</script>
